<template>
    <div>
        <ul class="header-nav">
            <li>
                <router-link :class="{'currentLi':$route.path === '/occupationalHealth'}"
                             to="/occupationalHealth">监测记录</router-link>
            </li>
            <li>
                <router-link :class="{'currentLi':$route.path === '/occupationalHealth/statistical'}"
                             to="/occupationalHealth/statistical">监测统计</router-link>
            </li>
        </ul>
        <!-- <div data-v-ad2057c0="" class="cut-off-rule"></div> -->
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>
</template>
<script>
export default {
    name: 'occupationalHealth'
}
</script>
<style scoped>
.header-nav {
    width: 100%;
    height: 60px;
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #f4f4f4;
}
.header-nav li {
    flex: 1;
    display: flex;
    justify-content: center;
    line-height: 60px;
    height: 60px;
    color: #999;
    font-size: 16px;
    text-align: center;
}
.header-nav .currentLi {
    width: 64px;
    line-height: 60px;
    height: 60px;
    float: left;
    color: #2269ff;
    font-size: 16px;
    border-bottom: 4px solid #2269ff;
}
</style>
